.tabs:not(.vertical) {
  border-bottom: rem-calc(2px) solid $light-gray;

  .tabs-title {
    margin-bottom: rem-calc(-2px);
    text-align: center;
    max-height: rem-calc(56px);

    a {
      font-weight: 300;
    }

    &.is-active {
      border-bottom: rem-calc(2px) solid $primary-color;
      a {
        color: $bold-black;
        font-weight: bold;
      }
    }
    &:not(.is-active) {
      border-bottom: rem-calc(2px) solid transparent;
      a {
        color: $dark-gray;
      }
    }
  }
}

.tabs.vertical {
  .tabs-title {
    position: relative;

    &.is-active {
      border-right: rem-calc(2px) solid $primary-color;
      a {
        color: $bold-black;
        font-weight: bold;
      }
    }
    &:not(.is-active) {
      a {
        color: $dark-gray;
        font-weight: 300;
      }
    }
  }
}


.tabs-content { 
  & > .tabs-panel {
    padding: 1rem;
  }

  &.vertical {
    & > .tabs-panel {
      padding: 1rem 3rem;
    }

    margin-left: rem-calc(-3px);
    border-left: rem-calc(2px) solid $light-gray;

  }
}

.tabs-contentForm {
  & > .tabs-panel {
    padding: 0 !important;
  }
}

.wizard_tabs {
  a {
    padding: 0.5rem 1.5rem;
  }
}

.remove-tab:hover {
  color: $alert-color;
  cursor: pointer;
}

.tabs-add {
  width: 60%;
}
